import React, { Component } from 'react'
import axios from 'axios'
import BScroll from 'better-scroll'

export class Scroll extends Component {
    constructor(props){
        super(props)
        this.state={
            list:[]
        }
    }
    componentDidMount(){
        axios.get('/list').then(res=>{
            console.log(res);
            this.setState({
                list:res.data
            },()=>{
                this.bs=new BScroll('.scroll')
            })
        })
    }
    componentDidUpdate(){
        this.bs && this.bs.refresh()
    }
    componentWillUnmount(){
        this.bs && this.bs.destroy()
    }
  render() {
      const {list}=this.state
      console.log("render中打印list",list);
    return (
      <div className='scroll'>
          <ul>
              {list.length?
              list.map(item=>{
                return <li key={item.id}>
                    <img src={item.img} alt="" />
                    <h3>{item.title}</h3>
                    <p>{item.name}{item.num}</p>
                </li>
              }):"暂无数据"
            }
          </ul>
      </div>
    )
  }
}

export default Scroll